<template>
    <div class="invitation-code-page">
       <el-form>
           <el-form-item label="店铺名称：">
               <el-select v-model="searchForm.shopName" placeholder="请输入店铺名称" size="small" filterable>
                    <el-option  label="全部" value=""></el-option>
                    <el-option v-for="(item, index) in shopNameList" :key="index" :label="item.name" :value="item.name" />
               </el-select>
           </el-form-item>
            <el-form-item label="任务开始时间 ：">
            <div class="block">
              <el-date-picker  size="small" @change="changeTime" v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </div>
          </el-form-item>
           <el-form-item>
               <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
           </el-form-item>
       </el-form>

       <el-table :data="tableData" border :default-sort = "{prop: 'date', order: 'descending'}" show-summary  :summary-method="getSummaries">
           <el-table-column prop="phone" label="商户号"></el-table-column>
           <el-table-column prop="platform_type_name" label="店铺类型"></el-table-column>
           <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
           <el-table-column prop="all_num" label="任务总数"></el-table-column>
           <el-table-column prop="wait_num" label="等待执行"></el-table-column>
           <el-table-column prop="wait_get_num" label="等待操作"></el-table-column>
           <el-table-column prop="real_num"  label="正在操作"></el-table-column>
           <el-table-column prop="success_num" label="执行成功"></el-table-column>
           <el-table-column prop="execution_fail_num" label="执行失败"></el-table-column>
           <el-table-column prop="merchant_fail_num"  label="商家终止"></el-table-column>
           <el-table-column prop="person_fail_num"  label="人工终止"></el-table-column>
           <el-table-column prop="over_fail_num"  label="超时终止"></el-table-column>
           <el-table-column prop="create_num"  label="创建中"></el-table-column>
       </el-table>

    </div>

</template>
<script>
import { apiGetAllShopList, apiShopHistoryAllDataList } from '../../request/api'
export default {
    data(){
      return {
        tableData:[],
        searchForm: {
            token: window.sessionStorage.getItem("token"),
            productId: '',
            platformType: '',
            shopName: '',
            createTime: '',
            promoterPhone: ''
        },
        storeType: [
          {
              label: '淘宝',
              value: 1
          },
          {
              label: '天猫',
              value: 2
          },
          {
              label: '京东',
              value: 3
          },
          {
              label: '1688',
              value: 4
          },
          {
              label: '唯品会',
              value: 13
          },
          {
              label: '拼多多',
              value: 15
          },
          {
            label: '抖音',
            value: 20
          }
        ],
        pickerOptions: {
            disabledDate(time) {
                let merchantTime = window.sessionStorage.getItem('merchantTime')
                let curDate = (new Date()).getTime();
                let three = merchantTime * 24 * 3600 * 1000;
                let threeMonths = curDate - three;
                return time.getTime() < threeMonths;
            },
        },
        searchTime: [],
        shopNameList: [],
        platformTypeList: [],
        shopTypeList: window.sessionStorage.getItem("shopTypeList"),
      }
    },
    created () {
        this.getTableData()
        this.getAllShopList()
        if(!this.shopTypeList || this.shopTypeList == null){
          this.platformTypeList = this.storeType
        } else {
          let shopShowTypeArr = this.shopTypeList.split(',')
          for(var i in this.storeType){
            if(shopShowTypeArr.indexOf(this.storeType[i].value.toString()) >=0) {
              this.platformTypeList.push(this.storeType[i])
            }
          }
        }
    },
    methods:{
      getAllShopList (){
        apiGetAllShopList({
          token: window.sessionStorage.getItem("token"),
        }).then(res =>{
          if(res.code == 1){
            this.shopNameList = res.msg
          }
        }).catch(res => {
          this.$message.error('数据加载失败')
        })
      },

      getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '总计';
                return;
            }
             if (index ===1) {
                sums[index] = '';
                return;
            }
            if (index ===2) {
                sums[index] = '';
                return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
                }, 0);
                sums[index];
            } else {
                sums[index] = '';
            }
          });
          return sums;
      },

      getTableData (){
        this.$showLoading()
        apiShopHistoryAllDataList(this.searchForm).then(res =>{
              this.tableData = res.data
              this.$hideLoading()
          }).catch(res => {
            this.$hideLoading()
            this.$message.error('数据加载失败')
          })
      },

      searchData(){
          this.getTableData()
      },
      changeTime(val){
          if (this.searchTime == null) {
               this.searchForm.createTime = ''
          } else{
              this.searchForm.createTime =  this.changeTimestamp(val[0]) + ' - ' +  this.changeTimestamp(val[1])

          }
      },

      changeTimestamp(time){
          var d = new Date(time);
          var s = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
          return s
      },
    }
}
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
</style>
